<template>
  <el-dialog
    class="public-dialog"
    title="预览"
    :width="`${widthPreview}mm`"
    :modelValue="modelValue"
    @close="handleClose"
    draggable
    align-center
    destroy-on-close
  >
    <template #header>
      <el-space :size="20">
        <div>预览</div>
        <el-button size="mini" @click="handleExport">导出</el-button>
        <el-button size="mini" @click="handlePrint">系统打印</el-button>
      </el-space>
    </template>
    <div :style="`height:${heightPreview}mm`" v-loading="loading">
      <div id="preview_content_custom"></div>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button :disabled="loading" @click="handleClose(false)">
          {{ disabled ? "关闭" : "取消" }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { hiprint } from "vue-plugin-hiprint";
import {LodopPrint} from '@/components/templateDesign/hooks/index.js'
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
});
const hiprintTemplatePreview = ref();
const printDataPreview = ref();
const widthPreview = ref("210");
const heightPreview = ref("297");
const loading = ref(false);
const emit = defineEmits(["update:modelValue", "close"]);
let hiprintTemplate;
/**
 * @description: 预览
 * @param {*} templateData 模板数据
 * @param {*} printData 打印数据
 * @param {*} width 纸张宽度
 * @param {*} flage 是否单独数据预览
 *
 */
const isFlage = ref(true);
const open = (templateData, printData, width = "210",height="297", flage = true) => {
  printDataPreview.value = printData;
  widthPreview.value = width;
  heightPreview.value = height;
  //单独创建实例
  isFlage.value = flage;
  if (flage) {
    hiprintTemplate = new hiprint.PrintTemplate({
      template: templateData,
      dataMode: 1,
      history: false,
    });
  } else {
    //getJson()获取即可
    hiprintTemplatePreview.value = templateData;
  }
  $("#preview_content_custom").html("");
  setTimeout(() => {
    //getHtml:可以加参数展示的数据
    flage
      ? $("#preview_content_custom").html(hiprintTemplate.getHtml(printData))
      : $("#preview_content_custom").html(
          hiprintTemplatePreview.value.getHtml(printData)
        );
  }, 500);
};

const handlePrint = () => {
  try {
    isFlage.value
      ? hiprintTemplate.print(
          printDataPreview.value,
          {
            callback: () => {
              loading.value = false;
            },
          },
          {
            styleHandler: () => {
              let css =
                '<link href="http://hiprint.io/Content/hiprint/css/print-lock.css" media="print" rel="stylesheet">';
              return css;
            },
          }
        )
      : hiprintTemplatePreview.value.print(
          printDataPreview.value,
          {
            callback: () => {
              loading.value = false;
            },
          },
          {
            styleHandler: () => {
              let css =
                '<link href="http://hiprint.io/Content/hiprint/css/print-lock.css" media="print" rel="stylesheet">';
              return css;
            },
          }
        );
  } catch (error) {
    ElMessage.error(error.message);
  } finally {
    loading.value = false;
  }
};

const handleExport = () => {
  loading.value = true;
  try {
    let date = new Date().getTime();
    isFlage.value
      ? hiprintTemplate.toPdf(printDataPreview.value, `${date}_预览的pdf`)
      : hiprintTemplatePreview.value.toPdf(
          printDataPreview.value,
          `${date}_预览的pdf`
        );
  } catch (error) {
    ElMessage.error(error.message);
  } finally {
    loading.value = false;
  }
};

const handleClose = async (refresh) => {
  hiprintTemplate = null;
  hiprintTemplatePreview.value = null;
  printDataPreview.value = null;
  isFlage.value = true;
  widthPreview.value = "210";
  emit("update:modelValue", false);
  emit("close");
};
defineExpose({
  open,
});
</script>

<style lang="scss" scoped></style>
